<template>
  <div class="comment-wrapper">
    <div class="comment">
      <h4 class="comment-title">课堂评论</h4>
      <ul class="comment-list">
        <li class="comment-item">
          <div class="comment-info">
            <span class="name">kevin:</span>
            <span class="date">2020-06-24 10:54:34</span>
          </div>
          <div class="comment-message">
            <pre>这是一条测试消息，这是一条测试评论</pre>
          </div>
        </li>
      </ul>
    </div>
    <el-input
      v-model="comment"
      type="textarea"
      :rows="3"
      placeholder="请输入200字以内的评论"
      class="comment-ipt"
      maxlength="200"
    >
    </el-input>
    <div class="submit-row">
      <el-button type="primary" style="width: 100%">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: ""
    };
  },

  methods: {}
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.comment-wrapper {
  .comment {
    border: 1px solid $border_color;
    box-sizing: border-box;
    padding: 5px;
    margin-bottom: 20px;
    .comment-title {
      font-size: 14px;
      color: $title_color;
      position: relative;
      padding: 10px;
      text-align: left;
      &::before {
        content: "";
        display: block;
        width: 2px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 10px;
        background: $primary;
      }
    }
    .comment-list {
      overflow-y: auto;
      height: 302px;
    }
    .comment-item {
      padding-bottom: 20px;
    }
    .comment-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: $title_color;
      font-size: 12px;
      font-weight: 700;
      padding-bottom: 3px;
    }
    .comment-message {
      font-size: 12px;
      color: $sub_title_color;
      text-align: left;
    }
  }
  .comment-ipt {
    resize: none;
  }
  .submit-row {
    padding-top: 20px;
  }
}
</style>
